import { Space } from 'antd'
import React from 'react'
import styles from './index.module.scss'
import { LikeFilled, MessageOutlined, StarFilled } from '@ant-design/icons'
export const IconText = ({
  icon,
  text,
  style,
  onClick,
  size = 28,
}: {
  icon: React.FC<any>
  text: string | number
  style?: Record<string, any>
  onClick?: () => any
  size?: number
}) => (
  <Space onClick={onClick} className={styles.root}>
    <span style={style}>{React.createElement(icon)}</span>
    <span className="text">{text}</span>
  </Space>
)
interface PropsType {
  info: Record<string, any>,
  onClick?:(id:string,str:string,value?:boolean)=>void
}
export const Operation = ({ info,onClick }: PropsType) => {
  const handleStar = (id:string) => {
    onClick&&onClick(id,'star',!info.star.status)
  }
  const handleLike = (id:string) => {
    onClick&&onClick(id,'like',!info.like.status)
  }
  const handleMessage = (id:string) => {
    onClick&&onClick(id,'messgae')
  }
  return (
    <>
      <IconText
        icon={StarFilled}
        text={info.star.count}
        style={{
          color: info.star.status ? 'yellow' : '#cfcfcf',
        }}
        key="list-vertical-star-o"
        onClick={() => handleStar(info.id)}
      />
      <IconText
        icon={LikeFilled}
        text={info.like.count}
        key="list-vertical-like-o"
        style={{
          color: info.like.status ? 'red' :  '#cfcfcf',
          marginLeft: '24px',
        }}
        onClick={() => handleLike(info.id)}
      />
      <IconText
        icon={MessageOutlined}
        text={info.message.count}
        style={{ marginLeft: '24px'}}
        key="list-vertical-message"
        onClick={() => handleMessage(info.id)}
      />
    </>
  )
}
